<template>
  <div class="preview-fee">
    <vxe-table border show-overflow="title" :merge-cells="mergeCells" :loading="loading" height="400" :data="tableData" :scroll-y="{ enabled: true, gt: 30 }">
      <vxe-column field="customerName" title="客户名称" min-width="100" fixed="left"></vxe-column>
      <vxe-column field="waybillNum" title="运单号" min-width="135" fixed="left"> </vxe-column>
      <vxe-column field="depositTime" title="拣货时间" min-width="135">
        <template #default="{ row }">
          {{ dayjs(Number(row.depositTime)).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </vxe-column>
      <vxe-column field="channelName" title="预报渠道" min-width="120"> </vxe-column>
      <vxe-column field="countryRegionName" title="目的地" min-width="100"></vxe-column>
      <vxe-column field="itemNumber" min-width="70" title="件数"> </vxe-column>
      <vxe-column field="settlementWeight" title="收费重" min-width="70"></vxe-column>
      <vxe-column field="costName" min-width="90" title="费用名称"> </vxe-column>
      <vxe-column field="clearingUnitPrice" min-width="70" title="单价"> </vxe-column>
      <vxe-column field="number" min-width="70" title="数量">
        <template #default="{ row }"> {{ row.number }} {{ row.unit }} </template>
      </vxe-column>
      <vxe-column field="totalPrice" min-width="70" title="金额" fixed="right"></vxe-column>
      <vxe-column field="bizName" min-width="70" title="业务员" fixed="right"> </vxe-column>
    </vxe-table>
    <div class="operation-btn">
      <span style="margin-right: 16px; font-weight: 600">总计: {{ allAmount }}</span>
      <a-button type="primary" v-debounce :loading="loading" @click="createBillHandle">生成对账单</a-button>
    </div>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="true" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import CreateBill from "../createBill/index.vue";
export default {
  name: "ReceivableFee",
  components: {
    CreateBill
  }
};
</script>
<script lang="ts" setup>
import dayjs from "dayjs";
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: ReceivableFee.ListRows[];
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { passData, visible } = toRefs(props);
const { tableData, loading, init, allAmount, dialogOpts, mergeCells } = InitHook({ passData });
const { createBillHandle, dialogSubmitHandle } = OperationHook({ dialogOpts, passData, loading, emit });
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init();
  }
);
</script>
<style lang="stylus" scoped>
.preview-fee{
    .operation-btn{
        text-align: right;
        padding: 12px 0;
    }
}
</style>
